<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="description" content="萌宠在线是全球最大的中文宠物在线交流平台，这里有许多关于宠物的科普、分享或求助等资讯。大家可以在这里成为更加优秀的铲屎官。">
    <meta name="keywords" content="萌宠,宠物,动物,宠物医疗,宠物科普,宠物分享,救助宠物,可爱的小动物">

    <link rel="shortcut icon" href="./images/logo.ico">
    <title>萌宠在线 - 发布</title>
    <link rel="stylesheet" href="./css/fonts.css">
    <link rel="stylesheet/less" href="./less/common.less">
    <link rel="stylesheet/less" href="./less/publish.less">
    <script src="./js/lessc.js"></script>
</head>

<body>
    <header> 
        <div class="left">
            <div class="logo"></div>
            <div class="title">创作服务平台</div>
            <div class="publish">发布帖子</div>
        </div>
        <div class="main">
            <div class="about">
                <div class="portrait">
                    <div class="ico"></div>
                </div>
                <div class="detail">
                    <div class="uesrname">jiayou</div>
                    <div class="id"><span>会员账号:</span><span>p12138</span></div>
                    <div class="synopsis"><span>个人说明:</span><span>地球没了狗狗真的不会转!!!</span></div>
                </div>
            </div>
            <div class="over-view">
                <div class="title">数据总览</div>
                <div class="detail">
                    <div class="fans">
                        <div class="title">粉丝量</div>
                        <div class="count">0</div>
                    </div>
                    <div class="visitor">
                        <div class="title">访客量</div>
                        <div class="count">0</div>
                    </div>
                    <div class="views">
                        <div class="title">观看量</div>
                        <div class="count">0</div>
                    </div>
                    <div class="interaction">
                        <div class="title">互动量</div>
                        <div class="count">0</div>
                    </div>

                </div>
                <div class="recently"><span>近7天</span><span></span></div>
            </div>
        </div>
        <div class="right">
            <div class="inspiration">
                <div class="title">创作灵感</div>
                <div class="more">全部</div>
            </div>
            <div class="hots">
                <div class="title">热门活动</div>
                <div class="picture"></div>
                <div class="theme">我的美拉德宠物</div>
                <div class="more">更多</div>


            </div>
        </div>
    </header>
    <nav>
        <div class="content">
            <div class="find">
                <span></span>
                <span>发现</span>
            </div>
            <div class="publish">
                <span></span>
                <span>发布</span>
            </div>
            <div class="messages">
                <span></span>
                <span>消息</span>
            </div>
            <div class="more">
                <span></span>
                <span>更多</span>
            </div>
        </div>

    </nav>
    <main>

        <div class="publish">

            <div class="text">
                <textarea name="text" id="text" maxlength="1000" autofocus="autofocus"
                    placeholder="分享身边的萌宠趣事..."></textarea>
            </div>
            <div class="more">
                <div class="topic">
                    <span></span>
                    <span>话题</span>
                </div>
                <div class="expression">
                    <span></span>
                    <span>表情</span>
                </div>
                <div class="picture">
                    <span></span>
                    <span>图片</span>
                </div>
                <div class="video">
                    <span></span>
                    <span>视频</span>
                </div>
            </div>
            <div class="publish-now">立即发布</div>
        </div>
    </main>
    <aside>
        <div class="topic">
            <div class="title">经典话题</div>
            <ul>
                <li><span>#</span><span>小狗狗的第一次下乡玩耍</span></li>
                <li><span>#</span><span>做全世界最快乐的小狗</span></li>
                <li><span>#</span><span>会捡球的小猫咪真的酷</span></li>
                <li><span>#</span><span>快进来看小狗狗伸懒腰</span></li>
                <li><span>#</span><span>宠物视频配音教程</span></li>
                <li><span>#</span><span>两猫一狗的日常生活</span></li>
                <li><span>#</span><span>开启狗仔与娃的奇妙约会</span></li>
                <li><span>#</span><span>小狗狗的眼睛在说爱你</span></li>
                <li><span>#</span><span>养的宠物像玩偶是什么体验</span></li>
            </ul>
        </div>
    </aside>
    <div class="foot-animation ">
        <div class="background"></div>
        <div class="bear "></div>
    </div>
    <script type="module" src="./js/publish.js"></script>
</body>

</html>